<!-- 互动中心 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">互动中心</p>
    <!-- sonRouter="yybureauFormationBJ" 为跳转新的页面编辑 -->
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      accept=".jpg,.png,,.jpeg,.mp4,.m4v"
      ref="databale"
      :czFun="czFun"
    ></dxtable>
    <n-modal v-model:show="showModal" preset="card" class="asdfsdfrert">
      <template #header>
        <div>回复消息</div>
      </template>
      <div>
        <n-form ref="formRef" :model="formValue" :rules="rules">
          <n-form-item path="neirong">
            <n-input
              v-model:value="formValue.neirong"
              placeholder="输入备注"
              type="textarea"
              rows="6"
            />
          </n-form-item>
        </n-form>
      </div>
      <template #action>
        <div class="tr">
          <n-button type="info" @click="dsfsdryty" :loading="loadinghsd">
            确认
          </n-button>
          <n-button class="ml20" @click="showModal = false"> 取消 </n-button>
        </div>
      </template>
    </n-modal>
    <n-modal v-model:show="dfdsftrty" preset="card" class="asdfsdfrert">
      <template #header>
        <div>回复内容</div>
      </template>
      <div>
        <div class="btm pt10 pm10" v-for="(sd, idx) in kdfsdsyt">
          <p class="ls fz16">{{ sd.neirong }}</p>
          <div class="display-flex">
            <p class="z9 flex-1">{{ sd.addTime }}</p>
            <span class="red fz12 sz" @click="jdsfsdtyttyy(sd, idx)">
              删除
            </span>
          </div>
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="dfdsftrty = false"> 关闭 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import dxtable from "../../components/util/dxtable.vue";
import sort from "../../components/util/sort.vue";
import { dxdel, dxget, dxpost, dialog } from "../../util/index";
import { NButton, NImage, NTag, NSwitch } from "naive-ui";
import { h, ref, reactive, render } from "vue";
const databale = ref();
const dfdsftrty = ref(false);
const initeer = () => {
  databale.value.initDataExpose();
};
const portUrl = "jyc/interaction/interaction";
const showModal = ref(false);
const formRef = ref();
const loadinghsd = ref(false);
const kdfsdsyt = ref([]);
const formValue = ref({
  neirong: "",
  hid: "",
});
const rules = {
  neirong: {
    required: true,
    message: "请输入内容",
    trigger: "blur",
  },
};
let dataJson = [
  {
    title: "留言人",
    key: "name",
    search: true,
    width: 200,
    render(row) {
      let jdfd = "z3";
      let isdfsd = row.userName;
      if (row.type == 2) {
        jdfd = "ls";
        isdfsd = "系统管理员";
      }
      return h("span", { class: jdfd }, isdfsd);
    },
  },
  {
    title: "内容",
    key: "neirong",
    search: true,
    render(row) {
      let jdfd = "z3";
      if (row.type == 2) {
        jdfd = "ls";
      }
      return h("span", { class: jdfd }, row.neirong);
    },
  },
  {
    title: "回复内容",
    width: 150,
    render(row) {
      if (row.reply.length > 0) {
        return h(
          "span",
          {
            class: "ls sz",
            onClick: function () {
              dfdsftrty.value = true;
              kdfsdsyt.value = row.reply;
            },
          },
          "点击查看回复内容"
        );
      } else {
        return "无回复内容";
      }
    },
  },
  {
    title: "置顶",
    key: "zhiding",
    width:100,
    render: (row) => {
      let jdfds = 2;
      return [
        h(NSwitch, {
          "default-value": row.zhiding == 2 ? true : false,
          "on-update:value": async (e) => {
            if (row.zhiding == 2) {
              jdfds = 1;
            }
            await dxpost(portUrl, { id: row.id, zhiding: jdfds }, "put");
            initeer()
          },
        }),
      ];
    },
  },
  {
    title: "留言时间",
    key: "addTime",
    width: 150,
  },
];
// {
//     title: "排序",
//     width: 100,
//     render: (row) => {
//       row.sjk = "jyc"; //数据库
//       row.databaseName = "interaction"; //表名
//       return h(sort, {
//         row,
//         onCallBack: () => {
//           initeer();
//         },
//       });
//     },
//   },
const qx = {
  DeletePermissionID: "jyczhaopingdel", //删除
  EditPermissionIdentifier: "jycinteractionbj", // 编辑
  NewPermissionIdentifier: "jyczhaopingxz", // 新建
  ViewPermissionID: "jycinteractionck", // 查看
};

let formJson = reactive([
  {
    title: "内容",
    key: "neirong",
    required: true,
    type: "textarea",
  },
  {
    title: "",
    key: "type",
    type: "",
    val: 2,
  },
]);
const czFun = {
  fun: (row) => {
    if (row.type == 1) {
      return [
        h(
          NButton,
          {
            type: "info",
            quaternary: true,
            onClick: async (e) => {
              showModal.value = true;
              formValue.value.hid = row.id;
            },
          },
          "回复"
        ),
      ];
    }
  },
};
const dsfsdryty = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      loadinghsd.value = true;
      await dxpost("jyc/huifu/huifu", formValue.value);
      loadinghsd.value = false;
      showModal.value = false;
      formValue.value = {
        neirong: "",
        hid: "",
      };
      initeer();
    }
  });
};
const jdsfsdtyttyy = async (row, idx) => {
  const jsdf = await dialog("确认删除吗？");
  if (jsdf == 1) {
    await dxdel("jyc/huifu/huifu", { id: row.id });
    kdfsdsyt.value.splice(idx, 1);
    initeer();
  }
};
</script>
<style scoped></style>
